<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>航班统计</title>

<script type="text/javascript" src="../js/jquery-3.4.1/jquery-3.4.1.js"></script>
<script type="text/javascript" src="../js/bootstrap-4.4.1-dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../js/bootstrap-4.4.1-dist/css/bootstrap.css">

<style type="text/css">
.card {
	width: 95%;
	margin: 0 auto;
}

.card-body-top {
	margin-top: -10px;
	margin-bottom: 5px;
}

canvas {
	margin-bottom: -20px;
	margin-top: -15px;
}
</style>

<script type="text/javascript">

</script>

</head>
<body>
	<div class="card shadow">
		<div class="card-body">
			<canvas id="canvas" height="525px" width="1200px">浏览器版本过低</canvas>
		</div>
		<div class="card-footer">
			<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal1">航班详细信息</button>
			<button type="button" class="btn btn-danger" style="display: none">统计2</button>
			<button type="button" class="btn btn-warning text-white" style="display: none">统计3</button>
		</div>
		<div class="modal fade" id="myModal1">
			<div class="modal-dialog">
				<div class="modal-content">

					<!-- 模态框头部 -->
					<div class="modal-header">
						<h4 class="modal-title">航班详细信息</h4>
						<button type="button" class="close" data-dismiss="modal">&times;</button>
					</div>

					<!-- 模态框主体 -->
					<div class="modal-body">
						<p>
							航班总数：
							<mark>${flightStatusCount.flightStatusCount }</mark>
							班
						</p>
						<p>
							航班未起飞数：
							<mark>${flightStatusCount.flightStatusCount1 }</mark>
							班
						</p>
						<p>
							航班已起飞数：
							<mark>${flightStatusCount.flightStatusCount2 }</mark>
							班
						</p>
						<p>
							航班已降落数：
							<mark>${flightStatusCount.flightStatusCount3 }</mark>
							班
						</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<c:if test="${msg!=null }">
		<script type="text/javascript">
			alert("${msg}");
		</script>
	</c:if>
</body>

<script type="text/javascript">
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d");
	cinit();
	<c:forEach items="${cityList}" var="city">
		var cityName = "${city.cityName}";
        drawCityPoint(${city.cityPointX},${city.cityPointY},cityName);
    </c:forEach>
    <c:forEach items="${flightList}" var="flight">
    	var status = "${flight.flightStatus.statusTypeId}";
    	if(status==1){
    		ctx.strokeStyle = "red";
    	}else if(status==2){
    		ctx.strokeStyle = "blue";
    	}else{
    		ctx.strokeStyle = "green";
    	}
        drawCityLine(${flight.flightStartArea.cityPointX},${flight.flightStartArea.cityPointY},${flight.flightEndArea.cityPointX},${flight.flightEndArea.cityPointY});
    </c:forEach>
    function cinit(){
    	ctx.translate(0, canvas.height);
		ctx.font = "15px Georgia";
		ctx.fillText("实时航线图",10,-10);
		ctx.beginPath();
		ctx.moveTo(10,-52);
		ctx.lineTo(37,-52);
		ctx.strokeStyle="red";
		ctx.fillText(" 未起飞",40,-50);
		ctx.stroke();
		ctx.beginPath();
		ctx.moveTo(10,-82);
		ctx.lineTo(37,-82);
		ctx.strokeStyle="green";
		ctx.fillText(" 已降落",40,-80);
		ctx.stroke();
		ctx.beginPath();
		ctx.moveTo(10,-112);
		ctx.lineTo(37,-112);
		ctx.strokeStyle="blue";
		ctx.fillText(" 正在飞",40,-110);
		ctx.stroke();
    }
	function drawCityPoint(x, y, name) {
		x = x / 6 + 350;
		y = -y / 7 + 20;
		ctx.fillText(name, x, y);
		ctx.beginPath();
		ctx.arc(x, y, 3, 0, Math.PI * 2, true);
		ctx.closePath();
		ctx.fill();
	}
	function drawCityLine(x1,y1,x2,y2){
		x1 = x1 / 6 + 350;
		x2 = x2 / 6 + 350;
		y1 = -y1 / 7 + 20;
		y2 = -y2 / 7 + 20;
		ctx.beginPath();
		ctx.moveTo(x1,y1);
		ctx.quadraticCurveTo(getRandom(x1,x2),getRandom(y2,y1),x2,y2);
		ctx.stroke();
	}
	function getRandom(a,b){
		return Math.random()*(b-a)+a;
	}
</script>
</html>